<template>
  <div>
    <div class="content">
      <div class="header">
        <!-- 修改表单区域 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索类型" style="width: 200px">
            <el-select
              v-model="formInline.key_type"
              placeholder="请选择"
              style="width: 200px"
              @change="getselect1()"
            >
              <el-option
                v-for="item in searchselectdata"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="创建时间">
                            <el-date-picker v-model="formInline._create_time" type="datetimerange" range-separator="To"
                                start-placeholder="Start date" end-placeholder="End date" />
                        </el-form-item> -->
          <el-form-item label="搜索关键字">
            <el-input
              v-model="formInline._key_word"
              placeholder="请输入关键字"
              clearable
            />
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input
              v-model="formInline.user_id"
              placeholder="请输入用户ID"
              clearable
            />
          </el-form-item>
          <el-form-item label="订单状态" style="width: 200px" v-show="!heShow">
            <el-select
              v-model="formInline._status"
              placeholder="请选择订单状态"
              style="width: 200px"
              @change="getselect2()"
            >
              <el-option
                v-for="item in orderstatuslist"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品类型" v-show="!heShow">
            <el-select
              v-model="formInline._goods_type"
              placeholder="请选择商品类型"
              style="width: 200px"
              @change="getselect3()"
            >
              <el-option
                v-for="item in goodstypelist"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="下单来源" v-show="!heShow">
            <el-select
              v-model="formInline._goods_from"
              placeholder="请选择下单来源"
              style="width: 200px"
              @change="getselect4()"
            >
              <el-option
                v-for="item in dockinglist"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商编号" v-show="!heShow">
            <el-input
              v-model="formInline.supplier_id"
              placeholder="请输入供应商编号"
              clearable
            />
          </el-form-item>
          <el-form-item label="渠道" v-show="!heShow">
            <el-select
              v-model="formInline.docking_id"
              placeholder="请选择渠道"
              style="width: 200px"
              @change="getselect5()"
            >
              <el-option
                v-for="item in orderfrom"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="成本价" v-show="!heShow">
            <el-input
              v-model="formInline.cost_price"
              placeholder="请输入成本价"
              clearable
            />
          </el-form-item>
          <el-form-item label="销售单价" v-show="!heShow">
            <el-input
              v-model="formInline.price"
              placeholder="请输入销售单价"
              clearable
            />
          </el-form-item>

          <el-form-item label="订单时间范围" v-show="!heShow">
            <el-date-picker
              v-model="ranges"
              type="daterange"
              range-separator="To"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleChange"
              ref="datePicker"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitSee">查询</el-button>
            <el-button type="primary" plain @click="onSubmit">重置</el-button>
            <span class="he" v-show="!heShow" @click="btnHe2">
              合并
              <el-icon><ArrowUp /></el-icon>
            </span>
            <span class="he" v-show="heShow" @click="btnHe">
              展开
              <el-icon><ArrowDown /></el-icon>
            </span>
          </el-form-item>
        </el-form>
      </div>
      <div class="area">
        <el-button type="primary" @click="btnAdd" style="margin-left: 10px"
          >添加商品限购</el-button
        >
        <div class="table-area">
          <el-table border :data="dataList" stripe style="width: 100%">
            <el-table-column
              prop="id"
              align="center"
              label="模版名称"
              #default="scope"
              width="160"
            >
            </el-table-column>
            <el-table-column
              prop="goods_name"
              align="center"
              label="限制类型"
              #default="scope"
              width="100"
            >
            </el-table-column>

            <el-table-column
              prop="username"
              align="center"
              label="周期"
              width="100"
              #default="scope"
            >
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.username"
                placement="top-start"
              >
                <div class="nameshopping" style="color: #1890ff">
                  {{ scope.row.username }}
                </div>
              </el-tooltip>
            </el-table-column>
            <el-table-column
              align="center"
              prop="company"
              label="周期类型"
              #default="scope"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="_level_name"
              label="限制数量"
              #default="scope"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="balance"
              label="状态"
              #default="scope"
            >
              <el-switch v-model="scope.row.status" />
            </el-table-column>

            <el-table-column
              align="center"
              prop="pid"
              label="已设置商品"
              #default="scope"
            >
            </el-table-column>

            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              min-width="240"
            >
              <template #default="scope">
                <div>
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    @click="shenji(scope.row, 0)"
                    style="margin-bottom: 5px"
                    >设置商品</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    @click="btnEditn(scope.row, 0)"
                    style="margin-bottom: 5px"
                    >编辑</el-button
                  >

                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <div class="image-overlay">
      <el-dialog v-model="imgShow" :show-close="false" width="36%">
        <img style="width: 100%" :src="currentImage" alt="" />
      </el-dialog>
    </div>
    <!-- 切换用户等级 -->
    <el-dialog
      v-model="dialogVisible"
      title="商品限购"
      width="50%"
      :before-close="handleClose"
    >
      <div class="inputs">
        <div>
          <span>策略名称</span>
        </div>
        <el-input
          style="margin-top: 12px"
          v-model="formInline.supplier_id"
          placeholder="请输入名称"
          clearable
        />
      </div>
      <div class="inputs">
        <div>
          <span>限制类型</span>
        </div>
        <el-select
            v-model="formInline._status"
            placeholder="限制类型"
            style="width: 200px"
            @change="getselect2()"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
      </div>
      <div class="inputs">
        <div>
          <span>周期类型</span>
        </div>
        <el-select
            v-model="formInline._status"
            placeholder="周期类型"
            style="width: 200px"
            @change="getselect2()"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
      </div>
      <div class="inputs">
        <div>
          <span>限制周期</span>
        </div>
        <el-input-number
          style="margin-top: 12px"
          v-model="num"
          :min="1"
          :max="10"
          @change="handleChange"
        />
      </div>
      <div class="inputs">
        <div>
          <span>限制数量</span>
        </div>
        <el-input-number
          style="margin-top: 12px"
          v-model="num2"
          :min="1"
          :max="10"
          @change="handleChange"
        />
      </div>
      <div class="inputs">
        <div>
          <span>状态</span>
        </div>
        <el-radio-group v-model="radio">
            <el-radio :label="3">开启</el-radio>
            <el-radio :label="6">关闭</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 设置商品 -->
    <el-dialog
      v-model="dialogVisible2"
      draggable
      title="作业帮商品"
      width="60%"
      :before-close="handleClose"
    >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品ID/名称" style="width: 200px">
          <el-select
            v-model="formInline.key_type"
            placeholder="请选择"
            style="width: 200px"
            @change="getselect1()"
          >
            <el-option
              v-for="item in searchselectdata"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品分类" style="width: 200px" v-show="!heShow">
          <el-select
            v-model="formInline._status"
            placeholder="请选择商品分类"
            style="width: 200px"
            @change="getselect2()"
          >
            <el-option
              v-for="item in orderstatuslist"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitSee">查询</el-button>
          <el-button type="primary" plain @click="onSubmit">重置</el-button>
          <el-button type="primary" @click="btnselect">选择商品</el-button>
          <el-button type="success" @click="onSubmit">取消选择</el-button>
        </el-form-item>
      </el-form>
      <div class="tables">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="商品ID" align="center" />
          <el-table-column prop="name" label="商品名称" align="center" />
          <el-table-column prop="address" label="成本价" align="center" />
          <el-table-column prop="type" label="状态" align="center" />
          <el-table-column label="操作" align="center">
            <el-button @click="submitSee">取消选择</el-button>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible2 = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选择商品 -->
    <el-dialog
      v-model="dialogVisible3"
      title="选择商品"
      draggable
      width="60%"
      :before-close="handleClose"
    >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品ID/名称" style="width: 200px">
          <el-select
            v-model="formInline.key_type"
            placeholder="请选择"
            style="width: 200px"
            @change="getselect1()"
          >
            <el-option
              v-for="item in searchselectdata"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="商品分类" style="width: 200px" v-show="!heShow">
          <el-select
            v-model="formInline._status"
            placeholder="请选择商品分类"
            style="width: 200px"
            @change="getselect2()"
          >
            <el-option
              v-for="item in orderstatuslist"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类" style="width: 200px" v-show="!heShow">
          <el-select
            v-model="formInline._status"
            placeholder="状态"
            style="width: 200px"
            @change="getselect2()"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitSee">查询</el-button>
          <el-button type="primary" plain @click="onSubmit">重置</el-button>
    
         
        </el-form-item>
      </el-form>
      <div class="tables">
        <el-button type="success" @click="onSubmit">选择0</el-button>
        <el-table :data="tableData" border style="width: 100%;margin-top: 12px;">
          <el-table-column prop="date" label="商品ID" align="center" />
          <el-table-column prop="name" label="商品名称" align="center" />
          <el-table-column prop="address" label="成本价" align="center" />
          <el-table-column prop="type" label="状态" align="center" />
          <el-table-column prop="type" label="商品面值" align="center" />
        
        </el-table>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible3 = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible3 = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

import { delOrder } from "~/base/api/order/orderList.ts";
import {
  getList,
  getCustomerListRenderBeforeData,
} from "~/base/api/admin/adminList.ts";
import {
  PictureFilled,
  ArrowDown,
  CopyDocument,
  Picture,
  ArrowUp,
} from "@element-plus/icons-vue";
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import axios from "axios";
import { Loading } from "@element-plus/icons-vue";
import {
  ElMessageBox,
  ElMessage,
  ElLoading,
  componentSizeMap,
} from "element-plus";
import { range } from "lodash-es";
import { select } from "radash";
import order from "@/router/static-routes/order";
import { Row } from "element-plus/lib/components/table-v2/src/components/index.js";
const names = ref(0);
const heShow = ref(true);
const dialogVisible3=ref(false)
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const imgShow = ref(false);
// 图片预览相关状态
const previewVisible = ref(false);
const currentImage = ref("");
const statuss = ref("");
const radio=ref(3)
const tableData = ref([
  {
    date: "232423",
    name: "1",
    address: "2",
    type: "销售",
  },
  {
    date: "12323",
    name: "Tom",
    address: "122",
    type: "销售",
  },
  {
    date: "13312",
    name: "Tom2",
    address: "1221",
    type: "销售",
  },
]);
const drawer = ref(false);
const tabname = ref(0);
const num = ref(1);
const num2 = ref(1);
const dengji = ref("");
const orderstatuslist = ref([]);
const searchselectdata = ref([]);
const goodstypelist = ref([]);
const dockinglist = ref([]);
const ranges = ref([]);
const orderfrom = ref([]);
const stateList=ref([
    {
        value:1,
        lable:'销售'
    },
    {
        value:2,
        lable:'暂停'
    },
    {
        value:3,
        lable:'禁销'
    }
])
//下拉搜索
function getselect1() {
  getSetdocking();
}
function getselect2() {
  getSetdocking();
}
function getselect3() {
  getSetdocking();
}
function getselect4() {
  getSetdocking();
}
function getselect5() {
  getSetdocking();
}
function getKami(e) {
  console.log("这个获取的是什么", e, form.value.card_ids);
  let bobo = [];
  for (let item of e) {
    bobo.push(item.id);
  }
  console.log("测试波波是多少", bobo.join(","));
  form.value.card_ids = bobo.join(",");
}

//点击展开
function btnHe() {
  heShow.value = false;
}
function btnHe2() {
  heShow.value = true;
}

// 打开图片预览
const openImagePreview = (imageUrl) => {
  console.log("11111", imageUrl);
  currentImage.value = imageUrl;
  imgShow.value = true;
};

// 关闭图片预览
const closeImagePreview = () => {
  previewVisible.value = false;
};

// 更现代的复制函数（推荐）
async function btnOrdersn2(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}

// 更现代的复制函数（推荐）
async function btnOrdersn5(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
const orderObj = ref({});
const recharge_hints = ref("");

const form = ref({
  card_ids: "",
  backmoney_part: "",
  address_company: "",
  money1: "",
  checked1: "true",
  backmoney_type: "2",
  order_style: "1",
  current_progress: "",
  target_progress: "",
  recharge_hints: "",
  start_progress: "",
  status: 3, // 数字
  address_ordersn: "",
});

const dataUser = ref([]);
//查看详情
function btnSee(e) {
  getCustomerListRenderBeforeData({ id: e.id }).then((res) => {
    console.log("详情结果", res);

    drawer.value = true;
    orderObj.value = res.data.user_info;
    dataUser.value = res.data.user_level_list;
    for (let item of res.data.user_level_list) {
      if (orderObj.value.level_id == item.value) {
        dengji.value = item.lable;
      }
    }
    if (orderObj.value.status == 1) {
      orderObj.value.status = true;
    } else {
      orderObj.value.status = false;
    }
    if (orderObj.value.noneed_userinput_pass == 1) {
      orderObj.value.noneed_userinput_pass = false;
    } else {
      orderObj.value.noneed_userinput_pass = true;
    }
    if (orderObj.value.weixin_nickname == "") {
      orderObj.weixin_nickname = "未绑定";
    }
    if (orderObj.value.qq == "") {
      orderObj.value.qq = "未绑定";
    }
    if (orderObj.value.is_team_head == 0) {
      orderObj.value.is_team_head = false;
    } else {
      orderObj.value.is_team_head = true;
    }
  });
}
const dataList = ref([]);
// 添加响应式检测
const isMobile = ref(false);

const channelTreeData = ref([]); // 渠道树形结构数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示数量
const total = ref(0); // 总记录数
const keyword = ref("");
const keytype = ref("");

const formInline = reactive({
  _key_word: "",
  _key_type: "",
  _status: "",
  supplier_id: "",
  docking_id: "",
  cost_price: "",
  face_price: "",
  _goods_from: "",
  _goods_type: "",
  _time_range: "",
  _end_time_range: "",
  price: "",
});
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "等级1",
  },
  {
    value: "Option2",
    label: "等级2",
  },
];
function handleIpClick(ip) {
  const url = `https://www.ip138.com/iplookup.php?ip=${encodeURIComponent(ip)}`;
  window.open(url, "_blank"); // 打开新标签页
}
//用户等级
function btnDeng() {
  dialogVisible.value = true;
}
//点击tab切换
function btnName(e) {
  names.value = e;
}
//点击电锯切换
function btnTable(e) {
  tabname.value = e;
}
function handleUpdateNode({ id, property, value }) {
  // 更新树数据中对应节点的属性
  const updateNode = (nodes) => {
    return nodes.map((node) => {
      if (node.id === id) {
        return { ...node, [property]: value };
      }
      if (node.list) {
        return { ...node, list: updateNode(node.list) };
      }
      return node;
    });
  };
  channelTreeData.value = updateNode(channelTreeData.value);
}

// 删除方法
const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定要删除这条记录吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 这里调用删除API
      delOrder({ id: id }).then(() => {
        ElMessage.success("删除成功");
        //fetchData(); // 刷新列表
        getSetdocking();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 查询处理
const handleQuery = () => {
  currentPage.value = 1; // 重置为第一页
  getSetdocking();
};

// 重置查询条件
const handleReset = () => {
  formInline.user = "";
  handleQuery();
};
// 分页尺寸变化
const handlePageSizeChange = (size: number) => {
  pageSize.value = size;
  getSetdocking();
};

// 页码变化
const handleCurrentPageChange = (page: number) => {
  currentPage.value = page;
  getSetdocking();
};
onMounted(() => {
  getSetdocking();
});
//新增打开弹框
function btnAdd() {
  dialogVisible.value = true;
}
function btnEditn() {
  dialogVisible.value = true;
}
//升级任务
function shenji() {
  dialogVisible2.value = true;
}
//选择商品
function btnselect(){
    dialogVisible3.value=true
}
//查询
function submitSee() {
  console.log("erer");
  getSetdocking();
}
function getFullInfoText(infoArray) {
  if (!Array.isArray(infoArray)) return "";

  // 过滤有效值并格式化为可读文本
  return infoArray
    .map((item) => {
      //const key = item.key?.trim() || "参数";
      const val = item.value?.toString() || "";
      return ` ${val}`;
    })
    .join("\n"); // 用换行符分隔每个条目
}

//列表
function getSetdocking() {
  // 显示 loading
  const loadingInstance = ElLoading.service({
    target: ".el-dialog", // 针对对话框区域
    lock: true,
    text: "正在加载数据中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  let parm = {
    page: currentPage.value,
    limit: pageSize.value,
    ...formInline,
  };
  getList(parm)
    .then((res) => {
      if (res.code == 200) {
        dataList.value = res.data.data;
        console.log("获取的数据", dataList.value);
        for (let item of dataList.value) {
          if (item.status == 1) {
            item.status = true;
          } else {
            item.status = false;
          }
        }
        if (res.data.data) {
          total.value = Number(res.data.count);
        }

        console.log("获取的数据222", dataList.value);
      }
    })
    .finally(() => {
      // 数据加载完成后关闭 loading
      loadingInstance.close();
    });
}
</script>
<style>
.el-input.is-disabled .el-input__wrapper {
  background: white !important;
}
</style>
<style scoped>
.deep .el-input.is-disabled .el-input__wrapper {
  background: white !important;
}
.order-titme {
}

.iconss {
  color: #999;
  cursor: pointer;
  position: relative;
  top: 3px;
}

.iconss:hover {
  color: #1890ff;
}

.icons {
  font-size: 21px !important;
  position: relative !important;
  top: 18px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.icons2 {
  font-size: 50px !important;
  position: relative !important;
  top: 10px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.sanfang {
  margin-left: 12px;
  font-size: 11px;
  color: #1890ff;
  cursor: pointer;
}
.lie-top {
  display: flex;
  justify-content: center;
}
.lie-input {
  width: 100%;
  background-color: white;
}
.orders-names {
}

.order-names {
  display: flex;
  margin-top: 15px;
}

.order-information {
}

.order-detail {
  height: 142px;
  border-bottom: 1px solid #3333;
  margin-top: 10px;
  font-size: 13px;
  padding-bottom: 14px;
}

.activeTab {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.activeTabs {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.area-tab {
  display: flex;
  position: relative;
  left: -28px;
}
.area-tabs {
  height: 50vh;
  overflow: auto;
}

.area-name {
  margin-left: 30px;
  cursor: pointer;
  height: 31px;
}

.areas-header {
  height: 32px;
  border-bottom: 1px solid #3333;
  width: 100%;
}

.bianhao {
  margin-top: 16px;
  margin-left: 9px;
  font-size: 13px;
}

.right-name {
  margin-left: 8px;
}

.areas {
  width: 98%;
  margin: 0 auto;

  margin-top: 40px;
}

.quxiao {
  /* color: white;
            background-color: rgba(0, 0, 0, .65); */
  font-size: 12px;
  margin-top: 8px;
}

.type-name {
  margin-left: 80px;
}
.imgs {
  width: 70px;
  height: 70px;
  position: relative;
  top: 4px;
  border-radius: 6px;
}
.xx {
  position: absolute;
  right: -4px;
  color: red;
  top: -7px;
  cursor: pointer;
}
.types {
  display: flex;
  margin-top: 30px;
  position: relative;

  font-size: 13px;
}
.inputs2 {
  width: 60vw;
  padding-left: 12px;
}

.imgsleft {
  width: 70px;
  height: 70px;
}

.img-left {
  width: 9%;
}

.img-content {
  margin-top: 12px;
  display: flex;
}

.contents-title {
  display: flex;
  margin-top: 14vh;
  justify-content: space-between;
}

.unbers {
  color: #1890ff;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  margin-left: 12px;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}

.ordername {
  color: #333;
  border: 1px solid #3333;
  border-color: #333;
  /* padding: 1px 9px 1px 9px; */
  margin-left: 12px;
  height: 22px;
  width: 56px;
  text-align: center;
  font-size: 11px;
  line-height: 22px;
}

.kami {
  color: #13ce66;
  background-color: #e7faf0;
  border-color: #d0f5e0;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}
a {
  text-decoration: none;
  color: inherit;
}
.shu2 {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 25px;
  left: -8px;
}
.zhuangtai {
  display: flex;
  margin-top: 12px;
  font-size: 13px;
}
.imgs {
  width: 50px;
  height: 50px;
  position: relative;
  top: 4px;
  border-radius: 6px;
}

.table-name {
  color: #1890ff;
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  height: 23px;
  line-height: 23px;
}

.table-name2 {
  border-color: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 3px 5px 3px 9px;
  cursor: pointer;
}

.footerss {
  display: flex;
  width: 96%;
  margin: 0 auto;
  font-size: 13px;
}
.imglists {
  display: flex;
  margin-left: 9px;
  position: relative;
}
.footers {
  width: 98%;
  border: 1px solid #3333;
  margin: 0 auto;
  height: 100px;
  margin-top: 25px;
}

.tabname {
  color: #409eff !important;
  border-bottom: 2px solid #409eff !important;
}

.tab-name {
  margin-left: 18px;
  cursor: pointer;
  height: 30px;
}
.inputs {
  margin-top: 12px;
}
.header-area {
  display: flex;
  position: relative;
  left: -18px;
  top: 1px;
}

.names {
  background: #409eff !important;
  color: white !important;
  border: none !important;
}

.jiaoyi {
  background-color: #13ce66;
}

.header-name {
  border-radius: 20px;
  padding: 3px 16px 3px 16px;
  border: 1px solid #9999;
  margin-left: 12px;
  font-size: 13px;
  cursor: pointer;
}

.headers {
  display: flex;
  padding-bottom: 12px;
}

.m-2 {
  width: 160px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.configurations {
  margin-top: 12px;
}

.configuration-area {
}

.dialog-footer {
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
}

.orders-name {
  margin-top: 12px;
}

.orders {
  margin-left: 12px;
}

.order-area {
  width: 98%;
  padding-bottom: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
}
.zanwu {
  display: flex;
  justify-content: center;
  position: relative;
  top: 25vh;
}
.tabs-area {
  margin-top: 12px;
}
.he {
  margin-left: 12px;
  color: #1890ff;
  cursor: pointer;
}
.tables {
}
.diolog-content {
}

.shu {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 19px;
}

.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tabs-price {
  border: 1px solid #3333;
  padding: 5px 12px 3px 12px;
}

.timeShow {
  color: red !important;
}

.tabs {
  margin-left: 10px;
}

.tab-header {
  display: flex;
  width: 100%;
}
.info-area {
  display: flex;
  white-space: nowrap;
  width: 88%;

  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;

  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  text-align: center;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader {
  position: relative;

  left: 10px;
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.avatar-uploader:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}
.info-area2 {
}
.info-area:hover {
  color: #1890ff;
}
.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;
}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}
.nameshopping {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70px;
  cursor: pointer;
  text-align: center;
}
.nameshopping:hover {
  color: #1890ff;
}
/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}

/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.tupians {
  display: flex;
}
/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
</style>
